<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="hasflag.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-hasflag"
        role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="hasflag.tab.advanced" class="nav-link" data-toggle="tab" href="#sieve-widget-advanced"
        role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="hasflag.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-hasflag" role="tabpanel">

        <div class="mb-3">
          <h5 data-i18n="hasflag.flags.title"></h5>
          <div id="sivHasFlagMatchTypes"></div>

          <h5 data-i18n="hasflag.flags.keyword"></h5>

          <div id="sivHasFlagKeyList" data-list-dropdown="#sivHasFlagKeyListTemplate">
          </div>

          <div id="sivHasFlagKeyListTemplate" class="d-none">
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">\Seen</button>
              <button class="dropdown-item" type="button">\Answered</button>
              <button class="dropdown-item" type="button">\Flagged</button>
              <button class="dropdown-item" type="button">\Delete</button>
              <button class="dropdown-item" type="button">\Draft</button>
              <button class="dropdown-item" type="button">\Recent</button>
              <button class="dropdown-item" type="button">\$Label1</button>
              <button class="dropdown-item" type="button">\$Label2</button>
              <button class="dropdown-item" type="button">\$Label3</button>
              <button class="dropdown-item" type="button">\$Label4</button>
              <button class="dropdown-item" type="button">\$Label5</button>
            </div>
          </div>

        </div>
      </div>
      <div class="tab-pane fade" id="sieve-widget-advanced" role="tabpanel">
        <div id="sivHasFlagComparator"> </div>
      </div>
      <div style="white-space: pre-line" data-i18n="hasflag.help" class="tab-pane fade form-text" id="sieve-widget-help"
        role="tabpanel"></div>
    </div>
  </div>
</div>